class VoiceSettings {
  constructor(onChange) {
    this.onChange = onChange;
    this.form = document.createElement('form');
    this.setupForm();
  }

  setupForm() {
    // 音色选择
    const voiceField = this.createSelectField('音色', 'voice', [
      {value: 'male', text: '男声'},
      {value: 'female', text: '女声'},
      {value: 'child', text: '童声'}
    ]);
    this.form.appendChild(voiceField);

    // 语速调节
    const speedField = this.createRangeField('语速', 'speed', 0.5, 2.0, 0.1);
    this.form.appendChild(speedField);

    // 音量控制
    const volumeField = this.createRangeField('音量', 'volume', 0, 1, 0.1);
    this.form.appendChild(volumeField);

    // 播放模式
    const modeField = this.createSelectField('播放模式', 'mode', [
      {value: 'real-time', text: '实时播放'},
      {value: 'click', text: '点击播放'}
    ]);
    this.form.appendChild(modeField);

    // 提交按钮
    const submitButton = document.createElement('button');
    submitButton.type = 'submit';
    submitButton.textContent = '保存设置';
    this.form.appendChild(submitButton);

    // 表单提交事件
    this.form.addEventListener('submit', (e) => {
      e.preventDefault();
      const formData = new FormData(this.form);
      const settings = Object.fromEntries(formData.entries());
      this.onChange(settings);
    });
  }

  createSelectField(labelText, name, options) {
    const container = document.createElement('div');
    container.classList.add('form-field');

    const label = document.createElement('label');
    label.textContent = labelText;
    container.appendChild(label);

    const select = document.createElement('select');
    select.name = name;
    
    options.forEach(option => {
      const optionElement = document.createElement('option');
      optionElement.value = option.value;
      optionElement.textContent = option.text;
      select.appendChild(optionElement);
    });

    container.appendChild(select);
    return container;
  }

  createRangeField(labelText, name, min, max, step) {
    const container = document.createElement('div');
    container.classList.add('form-field');

    const label = document.createElement('label');
    label.textContent = labelText;
    container.appendChild(label);

    const input = document.createElement('input');
    input.type = 'range';
    input.name = name;
    input.min = min;
    input.max = max;
    input.step = step;
    container.appendChild(input);

    const valueDisplay = document.createElement('span');
    valueDisplay.classList.add('range-value');
    valueDisplay.textContent = input.value;
    container.appendChild(valueDisplay);

    input.addEventListener('input', () => {
      valueDisplay.textContent = input.value;
    });

    return container;
  }

  update(voiceData) {
    this.form.voice.value = voiceData.voice || 'male';
    this.form.speed.value = voiceData.speed || 1.0;
    this.form.volume.value = voiceData.volume || 1.0;
    this.form.mode.value = voiceData.mode || 'real-time';
  }

  getCurrentSettings() {
    return {
      voice: this.form.voice.value,
      speed: this.form.speed.value,
      volume: this.form.volume.value,
      mode: this.form.mode.value
    };
  }

  render() {
    return this.form;
  }
}

export default VoiceSettings;
